<template>
  <div id="NewsInformation">
    <img src="../assets/img/head3.png"
         alt="">
    <div class="content">
      <div class="news_title">
        <p class="title_text">{{row.title}}</p>
        <div class="title_foot">
          <div class="selected"
               @click="checkedFun">
            <img v-if="isChecked === 0"
                 src="../assets/img/like.png"
                 alt="#"
                 class="like_img">
            <img v-else
                 src="../assets/img/like_red.png"
                 alt="#"
                 class="like_img">
          </div>
          <p class="news_time">"时间：{{row.publish_time}}"</p>
        </div>

      </div>

      <div class="news_content"
           v-if="row.content1">
        <section class="details">
          <p class="datails_text">{{row.content1}}</p>
        </section>
        <section class="details">
          <meta name="referrer"
                content="no-referrer">
          <el-image :src="row.content1_img"
                    fit="fill"></el-image>
        </section>
        <section class="details">
          <p class="datails_text">{{row.content2}}</p>
        </section>
        <section class="details">
          <el-image :src="row.content2_img"
                    fit="fill"></el-image>
        </section>
      </div>
      <div class="news_content"
           v-if="row.content">
        <div v-html="row.content"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'newsdetail',
  data () {
    return {
      row: {},
      isChecked: 0,
      addlike: {
        users_id: this.$store.getters.userinfo.users_id,
        news_id: '',
        create_time: '',
        users_name: this.$store.getters.userinfo.name
      }
    }
  },
  mounted () {

  },
  created () {
    this.row = this.$route.params.row
    console.log('当前数据：', this.row)
    this.getisChecked()
  },
  methods: {
    // 收藏点击 
    checkedFun () {
      if (this.isChecked == 0) {
        this.isChecked = 1
        // this.addlike.users_id = this.$store.getters.userinfo.users_id
        this.addlike.news_id = this.row.news_id
        this.addlike.create_time = this.utils.getNowTime()

        console.log('添加收藏：', this.addlike)
        const api = '/addlike'
        this.$axios.post(api, this.addlike)
          .then(res => {
            console.log(res)
            this.$message({
              type: 'success',
              message: `收藏成功!`
            })
          })
          .catch(err => {
            console.log(err)
          })
      } else if (this.isChecked == 1) {
        this.isChecked = 0
        const api = `dellike?users_id=${this.$store.getters.userinfo.users_id}&news_id=${this.row.news_id}`
        this.$axios.get(api)
          .then(res => {
            console.log('取消收藏', res)
            // this.$message({
            //   type: 'success',
            //   message: `取消收藏!`
            // })
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 获取该用户收藏状态
    getisChecked () {
      const api = `isChecked?users_id=${this.$store.getters.userinfo.users_id}&news_id=${this.row.news_id}`
      this.$axios.get(api)
        .then(res => {
          console.log('获取该用户收藏状态', res.data)
          if (res.data == null || res.data.length == 0) {
            this.isChecked = 0
          } else {
            this.isChecked = 1
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style scoped>
.content {
  width: 1200px;
  margin: 20px auto;
  background-color: #fff;
  position: relative;
  z-index: 1;
  border: 1px solid rgb(192, 191, 191);
  box-shadow: 0px 1px 2px rgb(90, 89, 89);
  height: auto;
}
.news_title {
  padding: 0px 30px;
}
.title_text {
  text-align: center;
  line-height: 60px;
  font-size: 26px;
  color: #0099cc;
  border-bottom: dashed 1px #ddd;
}
.title_foot {
  display: flex;
  justify-content: space-between;
}
.selected {
  width: 80px;
  height: 80px;
}
.like_img {
  width: 50%;
  margin: 20px auto;
}
.like_img:hover {
  cursor: pointer;
  border: 2px solid #fff;
}
.news_time {
  text-align: right;
  line-height: 35px;
  padding: 10px 0 0 0;
  font-size: 14px;
  color: #999;
}
.news_content {
  height: auto;
  font-size: 16px;
  line-height: 35px;
  padding: 20px 35px 35px 35px;
}
.details {
  padding: 0px;
  margin: 0px;
  position: static;
  box-sizing: border-box;
}
.datails_text {
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  white-space: normal;
  box-sizing: border-box;
  text-indent: 25px;
}
</style>